import React, { Component } from 'react';
// import { inject, observer } from 'mobx-react'
import SpinComponent from '@/components/SpinComponent';
import LazyComponent from '@/components/LazyComponent';
import { Button, Radio } from 'antd';
// import locale from '@/views/locale';

// import Calendar from '@/views/calendar';

// // 同步方式加载组件 法一
import Avatars from '@/views/avatar';

const SpinAvatars = SpinComponent(props => <Avatars {...props} />);

// // 同步方式加载组件 法二
// const SpinAvatars = SpinComponent(() => require('@/views/avatar'));

// 异步方式加载组件
const Calendar = LazyComponent(() => import('@/views/calendar'));

// @inject('global','language')
// @observer
class About extends Component {
  constructor(props) {
    super(props);
    this.state = {
      calendarLoading: false,
      show: false,
      show2: false
    };
  }

  componentDidMount() {
    // const route = this.props.route;
    // const location = this.props.location;
    // const router = this.props.router;
    // console.log('DidMount:', this.props.intl.messages);
  }

  preLoad = () => {
    let { show } = this.state;
    show = !show;
    this.setState({ show });
  };

  preLoad2 = () => {
    console.log(this.props);
    const { showPageLoading, hidePageLoading } = this.props;
    showPageLoading();
    setTimeout(() => {
      hidePageLoading();
    }, 3000);
    let { show2 } = this.state;
    show2 = !show2;
    this.setState({ show2 });
  };

  onChange = e => {
    console.log(e.target.value);
    const { language } = this.props;
    language.switchLocale(e.target.value);
  };

  lazyComponentDidLoad = componentName => {
    switch (componentName) {
      case 'AboutCalendar':
        this.setState({ calendarLoading: false });
        break;
      default:
        break;
    }
  };

  render() {
    const { calendarLoading } = this.state;
    const { intl } = this.props;
    return (
      <div className="about">
        {/* 我是 { this.props.intl.formatMessage({id:"about_name"})} 页面 */}
        <Button type="primary" loading={calendarLoading} onClick={this.preLoad}>
          {intl.messages.hello}
        </Button>
        <Button type="primary" onClick={this.preLoad2}>
          显示
        </Button>
        <div style={{ paddingTop: '10px' }}>
          <Calendar lazyComponentDidLoad={this.lazyComponentDidLoad} {...this.props} />
        </div>
        <SpinAvatars {...this.props} />
        <div>
          <Radio.Group onChange={this.onChange} defaultValue="zh-CN">
            <Radio.Button value="zh-CN">中文</Radio.Button>
            <Radio.Button value="en-US">English</Radio.Button>
          </Radio.Group>
        </div>
      </div>
    );
  }
}

export default About;
